1
00:00:00,660 --> 00:00:04,090
Hello and welcome to this lecture in this lecture.

2
00:00:04,090 --> 00:00:11,720
We'll be creating the functionality for the tip cuk later with java script.

3
00:00:13,620 --> 00:00:19,740
I haven't got my text edit open it this might have a script file.

4
00:00:19,770 --> 00:00:27,470
This is where we are actually going to be writing the jig query code to create functionality for the

5
00:00:27,480 --> 00:00:28,420
app.

6
00:00:28,440 --> 00:00:32,550
Jake Query is a javascript library.

7
00:00:32,550 --> 00:00:38,780
The way this lecture is going to work I'm not very good at multitasking.

8
00:00:38,790 --> 00:00:45,600
See right writing the code and explain it at the same time so the way the format here is that I will

9
00:00:45,600 --> 00:00:53,610
write the code and then I'll explain it to you afterwards so that you don't have to watch me type and

10
00:00:53,730 --> 00:00:55,670
explain same types are right.

11
00:00:55,770 --> 00:00:57,810
And then I explain.

12
00:00:58,650 --> 00:01:04,990
Okay so on line one here I have created a function so I've defined.

13
00:01:05,000 --> 00:01:09,300
This is going to define the function in between this curly braces.

14
00:01:09,390 --> 00:01:18,050
So if I just tab to expand them what the function will do it will perform the actual calculation.

15
00:01:18,120 --> 00:01:23,460
So in between the curly braces there I am going to define some variables.

16
00:01:23,700 --> 00:01:33,120
A variable is used to hold som information say hellebore a variable will store a piece of information

17
00:01:33,420 --> 00:01:38,800
to 1 Create a few variables to hold various information.

18
00:01:40,610 --> 00:01:49,470
I have created some variables here from Lyme 3 to 6 so are just run through them with you.

19
00:01:49,480 --> 00:01:50,590
Line 3 here.

20
00:01:50,620 --> 00:02:00,160
Created a variable called a mount so uses to retrieve the values from the amount and the percentage

21
00:02:00,250 --> 00:02:04,260
fields and then store them inside the variables.

22
00:02:04,510 --> 00:02:08,980
Okay so the variable amount will store that also.

23
00:02:08,990 --> 00:02:12,840
Line for here will got a variable chord percentage.

24
00:02:12,960 --> 00:02:20,680
Also this will be used to store the percentage values and then deduct Valle mayne's it will calculate

25
00:02:21,160 --> 00:02:23,480
the value.

26
00:02:23,860 --> 00:02:24,910
Okay.

27
00:02:24,910 --> 00:02:34,350
Line for line finally again quoting the variable court tape and the value equal so the amount times

28
00:02:34,670 --> 00:02:44,830
they asked her examines times Times him in the parenthesis got a percentage to notice that is in the

29
00:02:44,830 --> 00:02:45,320
panties.

30
00:02:45,310 --> 00:02:48,610
We've got percentage divided by a hundred.

31
00:02:48,910 --> 00:02:50,840
Okay so the tip amount.

32
00:02:50,950 --> 00:02:53,120
We're trying to find the value of the percentage.

33
00:02:53,380 --> 00:02:59,620
It would be whatever amount we enter for the tape times the percentage.

34
00:02:59,620 --> 00:03:04,890
And this is how you find the percentage you just divide by a hundred.

35
00:03:04,960 --> 00:03:06,280
That will give you the percentage.

36
00:03:06,280 --> 00:03:09,260
That's what that line 5 line say.

37
00:03:09,280 --> 00:03:17,300
It's a variable that will store the total amount plus the tip and case for this will give you the total.

38
00:03:17,350 --> 00:03:25,430
So once we've calculated the percentage of the tip it all will add that to the value of the total amount.

39
00:03:25,430 --> 00:03:32,770
So these are all the variables store various values.

40
00:03:32,980 --> 00:03:41,990
Notice that the every variable was have a value and the value is here higher than the values are equal

41
00:03:41,990 --> 00:03:43,180
as to function.

42
00:03:43,180 --> 00:03:48,920
So we've got the friend functions here so this any way you see a dollar sign being used.

43
00:03:49,000 --> 00:03:52,360
Note that you are referencing the query library.

44
00:03:52,360 --> 00:03:55,740
So did dollar sign indicates a jaquie library.

45
00:03:55,970 --> 00:04:01,510
Line 3 here we've got the variable amount equal to this function here.

46
00:04:01,510 --> 00:04:08,300
This juv query function and the name of the function is mount as the value passed into it.

47
00:04:08,570 --> 00:04:15,730
Okay lifebuoy again that's another function line.

48
00:04:15,740 --> 00:04:24,780
Five is were used line 5 to calculate the how to tip amount and then Line 6 6.

49
00:04:24,790 --> 00:04:27,980
Here we created the variable variables.

50
00:04:27,990 --> 00:04:33,820
It was to the number function and inside the number function were passed it.

51
00:04:33,970 --> 00:04:40,280
The the argument all come out.

52
00:04:40,690 --> 00:04:46,200
One thing you need to know that the true number function on line 6.

53
00:04:46,420 --> 00:04:53,250
The number function the amount is actually a string is trinkets that would be ATEX.

54
00:04:53,320 --> 00:05:00,650
So then by adding in number two a string makes it makes it longer so.

55
00:05:00,760 --> 00:05:08,860
So the string we actually have to convert convert the string into any number first using the variable

56
00:05:08,920 --> 00:05:12,880
total equal number and then pass it.

57
00:05:13,000 --> 00:05:14,740
An argument of amount.

58
00:05:14,800 --> 00:05:19,960
Then we add the tip o k.

59
00:05:19,990 --> 00:05:26,630
I have added some more functions here from line 8 to 14.

60
00:05:26,670 --> 00:05:33,860
Again the way you see the dollars I use now that we are referencing a G query library.

61
00:05:33,940 --> 00:05:38,730
Just a quick note is no is that or the like this on line 3 here.

62
00:05:38,800 --> 00:05:43,970
This here this idea that I have passed 10 here is to raise.

63
00:05:43,990 --> 00:05:53,120
We defined this Heidi inside the hastier mail so the idea amounts percent and tall tall.

64
00:05:53,170 --> 00:05:57,110
If we pop out of the see a male we can see where we've defined it somewhat.

65
00:05:57,110 --> 00:06:00,770
And Heidi here implied Ecod amount.

66
00:06:00,940 --> 00:06:09,880
Got an idea called percent we've got an idea caught tip so that's where we've got these values from.

67
00:06:09,880 --> 00:06:17,890
From these are or I.D. attributes that we have defined inside the hastier melts or we are not calling

68
00:06:17,890 --> 00:06:21,980
them and using them as an argument in our G.

69
00:06:22,000 --> 00:06:23,780
Query function.

70
00:06:24,220 --> 00:06:31,210
Okay let's focus on the code we've just added on so from line 8 to line 14.

71
00:06:31,510 --> 00:06:38,900
Okay I've created some functions here not so we are going to use this functions to our fullest.

72
00:06:39,020 --> 00:06:42,660
Or the values in the result fields.

73
00:06:42,770 --> 00:06:49,880
So note that we are working for the call to the sick to fixed action.

74
00:06:49,880 --> 00:06:51,720
This online is here.

75
00:06:51,840 --> 00:06:52,250
K.

76
00:06:52,260 --> 00:06:54,770
The tepe to have fixed function.

77
00:06:54,770 --> 00:06:56,310
Note that the.

78
00:06:56,330 --> 00:06:59,240
To fix ouch and function.

79
00:06:59,240 --> 00:07:00,380
What both of what is.

80
00:07:00,410 --> 00:07:03,680
This is a property of all the numbers.

81
00:07:03,680 --> 00:07:11,190
This makes sure that they are only to two digits after the decimal.

82
00:07:11,420 --> 00:07:12,710
The too expensive.

83
00:07:12,710 --> 00:07:15,710
Is there is this function.

84
00:07:15,890 --> 00:07:16,940
It is a name.

85
00:07:17,000 --> 00:07:24,170
Make sure that there are only two digits after the decimal point.

86
00:07:24,290 --> 00:07:24,720
Okay.

87
00:07:24,780 --> 00:07:29,410
That's why it is used for same thing.

88
00:07:29,450 --> 00:07:30,790
What line line here.

89
00:07:30,800 --> 00:07:34,030
The function here shows that the.

90
00:07:34,070 --> 00:07:35,780
They're smart they're smart.

91
00:07:35,780 --> 00:07:39,060
Points are only two digits.

92
00:07:39,200 --> 00:07:39,680
Okay.

93
00:07:39,740 --> 00:07:44,690
Make sure that the numbers are two digits after the decimal point.

94
00:07:44,690 --> 00:07:46,810
That's what they are for.

95
00:07:47,150 --> 00:07:48,660
And then they return.

96
00:07:48,660 --> 00:07:51,390
Basically it will rate on force.

97
00:07:51,790 --> 00:07:53,960
If the value is force

98
00:07:56,600 --> 00:08:05,390
the use of the return here on line 11 truly prevents the prevent submission.

99
00:08:05,570 --> 00:08:07,320
So basically what is written.

100
00:08:07,310 --> 00:08:14,410
Force is usually used inside a call-back to prevent default behaviour.

101
00:08:14,660 --> 00:08:17,970
Okay so in relation to this.

102
00:08:18,080 --> 00:08:28,750
This code here it will in each tool prevent the form from submitting to dozens submit the form.

103
00:08:29,000 --> 00:08:38,780
So if they're not shell what that means is that in the line of code after the return force will not

104
00:08:38,840 --> 00:08:40,640
be executed.

105
00:08:40,850 --> 00:08:41,420
Okay.

106
00:08:41,510 --> 00:08:45,220
That's basically why this return is.

107
00:08:46,640 --> 00:08:57,810
So the we've now got is submit event function here which is on line 14.

108
00:08:57,980 --> 00:09:04,520
So this is Joe query here and disallowed talk is picked is the calculator idea which is the actual form

109
00:09:05,090 --> 00:09:12,730
and we've attached a dot sub meet event to the function.

110
00:09:12,900 --> 00:09:20,270
And is passed test calculate which is the actual button that you press to do the calculation.

111
00:09:20,360 --> 00:09:25,740
So what that does is submit evade functions most return force.

112
00:09:26,000 --> 00:09:31,520
Okay so this tells the browser not to load a new page.

113
00:09:31,700 --> 00:09:33,400
That's what the return force is.

114
00:09:33,440 --> 00:09:39,020
Okay so it tells a browser not to load a new page.

115
00:09:40,040 --> 00:09:47,740
So any code outside underneath this code here while not load a new page.

116
00:09:47,750 --> 00:09:50,000
That's what the return force means.

117
00:09:50,060 --> 00:09:54,180
Okay and here on line 14 here.

118
00:09:54,220 --> 00:10:02,410
At times this function here we about taja the function to the form submit event so this function and

119
00:10:02,410 --> 00:10:13,430
we've attached it to the submit it so that's it for this function so that we've created a function.

120
00:10:13,430 --> 00:10:17,460
Now the cut be a percentage cut glitter should work.

121
00:10:17,630 --> 00:10:19,620
So I'll just save this.

122
00:10:19,750 --> 00:10:23,910
There are any aspects of this show you do not understand.

123
00:10:23,930 --> 00:10:25,660
If I have not made myself clear enough.

124
00:10:25,670 --> 00:10:28,350
Please feel free to contact me.

125
00:10:28,580 --> 00:10:31,380
Be more than happy to explain a bit further.

126
00:10:31,380 --> 00:10:35,300
Also you could any of the code pathological journals sure of.

127
00:10:35,360 --> 00:10:38,480
You can just research it or contact me.

128
00:10:38,480 --> 00:10:40,470
I really would be pleased to help.

129
00:10:40,520 --> 00:10:49,690
Okay so I've saved it so if I open my calculator we should be able to perform some calculations.

130
00:10:50,270 --> 00:10:53,640
Okay this is the calculation so let's test it out.

131
00:10:53,660 --> 00:10:58,760
So for example we have a bill of eighty dollars.

132
00:10:58,790 --> 00:11:02,540
We all we need to pay a percent or a percentage.

133
00:11:02,570 --> 00:11:06,310
Or C 10 percent.

134
00:11:06,650 --> 00:11:13,070
So we'll come here and click on calculate Well let's see.

135
00:11:13,340 --> 00:11:15,170
Ah right that hadn't saved the problem.

136
00:11:15,170 --> 00:11:18,220
Okay so we can see here now let me do that again.

137
00:11:18,350 --> 00:11:20,690
Clear that so that you can see

138
00:11:23,730 --> 00:11:25,190
just clear this field

139
00:11:27,680 --> 00:11:29,520
key.

140
00:11:29,720 --> 00:11:37,340
I just refresh my browser right so if I pop in a new value there say for example we had a B or it is

141
00:11:37,340 --> 00:11:38,470
five dollars.

142
00:11:38,970 --> 00:11:42,000
We talk we have to pay five percent in tips.

143
00:11:42,000 --> 00:11:43,300
So click clack.

144
00:11:43,380 --> 00:11:47,460
And he tells us that the amount of tip we're paying is four dollars 25.

145
00:11:47,610 --> 00:11:51,240
So the total amount would be 89 dollar 25.

146
00:11:51,270 --> 00:11:55,970
So we've tested out late on a tip and it works perfectly.

147
00:11:56,160 --> 00:11:57,570
Thank you so much for your time.

148
00:11:57,600 --> 00:11:59,180
I hope the projet is useful.

149
00:11:59,250 --> 00:12:00,210
Take care.

150
00:12:00,210 --> 00:12:00,980
Bye for now.